<template>
  <zb-ai-result-top :detail="detail" />
  <!-- answerStatus 当前按钮状态 0-无发送内容， 1-回答中 2-回答结束 3-中断回答 -->
  <div class="content job-content flex">
    <div class="flex-1 talk-con w-100">
      <div class="tab-tit">
        <span>我发布的岗位</span>
        <el-button v-if="!isMobile" @click="delMore(delids)">删除</el-button>
      </div>
      <zb-scroll ref="zbScrollRef">
        <template v-if="isMobile && pager">
          <dl class="job-list">
            <dd v-for="item in pager.data" class="item" @click="edit(2, item.id)">
              <div class="top flex items-center">
                <span class="name text-line1">{{item.job_name}}</span>
                <span class="more flex items-center" >详情 <icon name="el-icon-ArrowRight" /></span>
              </div>
              <div class="intro">本科 | 25岁 | 8:00~10:00</div>
            </dd>
          </dl>
          <el-pagination v-if="pager"
                v-model:current-page="params.page"
                v-model:page-size="params.limit"
                :page-sizes="[1, 10, 15, 20, 40]"
                :disabled="disabled"
                layout="prev, pager, next"
                :total="pager.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
        </template>
        <template v-if="!isMobile && pager">
          <el-table class="zb-table" max-height="calc(100vh - 300px)" :data="pager.data" @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="selectable" width="55" />
            <el-table-column prop="job_name" label="岗位名称" min-width="140" />
            <el-table-column prop="age_requirements" label="年龄要求" width="100" />
            <el-table-column prop="working_hours" label="工作时间" width="100" />
            <el-table-column prop="experience_requirements" label="经验要求" width="100" />
            <el-table-column prop="settlement_method" label="结算" width="120">
              <template #default="{row}">
                <span class="rije">{{row.settlement_method}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="recruiting_company" label="招聘团队" width="140" />
            <!-- 审核状态:1=未审核,2=审核通过,3=审核未通过', -->
            <el-table-column prop="audit_status_text" label="状态" width="100">
              <template #default="{row}">
                <el-button link type="warning" v-if="row.audit_status == 1">待审核</el-button>
                <el-button link type="success" v-if="row.audit_status == 2">审核通过</el-button>
                <el-button link type="danger" v-if="row.audit_status == 3">审核未通过</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="publishtime_text" label="发布时间" width="160" />
            <el-table-column prop="job_name" label="操作" fixed="right" width="150">
              <template #default="{row}">
                <el-button link type="primary" @click="edit(1, row.id)">编辑</el-button>
                <el-button link type="primary" @click="edit(2, row.id)">详情</el-button>
                <el-button link type="danger" @click="delMore( row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-center">
            <el-pagination v-if="pager"
                  v-model:current-page="params.page"
                  v-model:page-size="params.limit"
                  :page-sizes="[1, 10, 15, 20, 40]"
                  :disabled="disabled"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pager.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
          </div>
        </template>
        
      </zb-scroll>
    </div>
    <zb-ai-result-history />
    <el-dialog v-if="EditShow" v-model="EditShow" title="编辑岗位" width="500">
      <zb-ai-form ref="zbAiFormRef" @submit="EditFun" />
    </el-dialog>
    <el-dialog v-if="detailShow" v-model="detailShow" title="查看详情" width="600">
      <dl class="detail-list">
        <dd v-for="item in jsons" class="dd">
          <span class="sp">{{item.key == 'recruiting_company' ? '招聘企业' : item.title}}：</span>
          <span v-if="item.id !== 99" class="con">{{item.val}}</span>
          <div v-else class="images flex flex-wrap con">
            <el-image v-for="(imgItem, imgIdx) in item.val" :src="imgItem" :preview-src-list="item.val" show-progress :initial-index="imgIdx" fit="cover" />
          </div>
        </dd>
      </dl>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, shallowRef, computed, reactive} from 'vue';
import { markdownLib } from '@/utils/markdown';
import { copy, isMobile, confirm } from '@/utils/util';
import { ElMessage } from 'element-plus';
import { submitjobApi, getjoblistApi, getjobApi, deljobApi, editjobApi } from '@/api/app';
const props = defineProps({
  json:null
})
const jsons = ref<{id:number, val:any, key:string}[]>([])
// 删除 1-编辑， 2-详情， 3-删除
const EditShow = ref(false);
const detailShow = ref(false)
const zbAiFormRef = ref()
const edit = async (type:number, id:number) => {
  if(type == 1){
    getJsons(id, type)
  }else if( type == 2 ){
    getJsons(id, type)
  }else if( type == 3 ){
    
  }
}
const delMore = async (ids:any) => {
  await confirm('确定删除选中的数据吗？');
  await deljobApi({id:ids});
  ElMessage.success('删除成功');
  getLists()
}
// 编辑岗位
const editFormData = ref();
const addressIds = reactive({
  province:'',
  city:'',
  area:''
})
const EditFun = (e:any) => {
  if(Array.isArray(e.job_address)){
    addressIds.province = e.job_address.length > 0 ? e.job_address[0] : '';
    addressIds.city = e.job_address.length > 1 ? e.job_address[1] : '';
    addressIds.area = e.job_address.length > 2 ? e.job_address[2] : '';
  }
  editjobApi({...e, ...addressIds, id: editId.value}).then(res=>{
    ElMessage.success('编辑成功');
    EditShow.value = false;
    getLists()
  })
  
}
const editId = ref()
const getJsons = (id:number, type:number) => {
  jsons.value = []
  editId.value = id;
  getjobApi({id: id}).then(async res=>{
    props.json.forEach((n:any, i:number) => {
      let val = n.key == 'business_license_image' || n.key == 'legal_person_id_card_images' ? res[n.key+'_full'] : res[n.key];
      if(n.key === 'job_address' && type == 1){
        val = [res.province, res.city, res.area]
      }
      jsons.value.push({...n, val: val})
    })
    if(type == 1){
      EditShow.value = true;
      await nextTick();
      zbAiFormRef.value?.initFormData({json: jsons.value, submit:'json'})
    }else if(type === 2){
      detailShow.value = true;
    }
    
  })
}

const route = useRoute();
const topic = route.query.id;
const showTop = ref(true); // 手机端需要用
const answerStatus = ref(0); // 当前按钮状态 0-无发送内容， 1-回答中 2-回答结束 3-中断回答
const emits = defineEmits(['edit', 'loadingOk']);
// 链接socket 
const markdownHTML = ref(''); // 回答的内容
const printData = ref<string>(``); // 需要打印的全部内容 => 当前的回答内容
const printEnd = ref(0); // 0-未打印， 1-打印中
const zbScrollRef = ref(); // 设置滚动条始终在最下面用的
// 需要发送的内容
const sendContent = ref(''); 
// 发布岗位
const sendMsgFun = (askcon:any) => {
  console.log('岗位发布', askcon)
  submitjobApi({...askcon}).then(res=>{
    ElMessage.success('岗位提交成功,等待审核');
    params.page = 1;
    getLists();
    emits('loadingOk')
  }).catch(()=>{
    emits('loadingOk')
  })
}
const params = reactive({
  limit:10,
  page:1
})
const pager = ref()
const getLists = () => {
  getjoblistApi(params).then(res=>{
    pager.value = res;
  })
}
getLists();
const handleSizeChange = (e:any)=>{
  params.limit = e;
  params.page = 1;
  getLists()
}
const handleCurrentChange = (e:any)=>{
  getLists()
}
const delids = ref()
const handleSelectionChange = (e:any) =>{
  delids.value = e.map(m => {return m.id}).toString();
}


// 中断对话
const stopTalk = () => {
  disconnect();
  printAddEnd();
}

// 初始化数据
const detail = ref();  // 产品详情
const initData = (data:any) => {
  detail.value = {...data};
  // console.log('初始化数据-----initData', data)
}



defineExpose({
  initData,
  sendMsgFun
})
</script>
<style lang="scss" scoped>
  @import '@/assets/styles/airesult.scss'; // 确保路径正确
  .tab-tit{margin-bottom: 20px; line-height: 1; display: flex; align-items: center; justify-content: space-between;}
  .content{
    padding-top: 30px;
    :deep(.zb-form){
      height: calc(90vh - 80px);
    }
    .detail-list{
      .dd{display: flex; line-height: 1.6; margin-bottom: 8px;}
      .sp{width:90px; text-align: right;}
      .con{flex: 1; width: 100%;}
    }
    .images{
      :deep(.el-image){width: 100px; height: 100px; border: 1px solid #ededed;border-radius: 6px; margin: 0 6px 6px 0;}
    }
    .rije{
      display: flex;  align-items: center;color: #67C23A;
      &::before{content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #67C23A; margin-right: 4px;}
    }
    .zb-table{width: 100%; margin-bottom: 20px;}
  }
  
  
  // 手机端央视
  .job-list{
    width: 100%;
    .item{background-color: #F7F7F7; width: 100%; height: 1.7rem; border-radius: 0.32rem; padding: 0.3rem; margin-bottom: 0.3rem;}
    .name{font-size: 0.34rem; width: calc(100% - 1rem);}
    .more{color: #7F7F7F; font-size: 0.28rem;}
    .top{margin-bottom: 0.1rem; }
    .intro{color: #7F7F7F; font-size: 0.3rem;}
  }
  @media only screen and (max-width: 769px){
    .job-content.content{
      padding-bottom: 2rem;padding-top: .4rem;
      .detail-list{
        max-height: calc(85vh - 60px); overflow-y: auto;
        .dd{display: block;}
        .sp{text-align: left;}
        span{display: inline-block; width: auto !important;}
      }
    }
    .tab-tit{font-size: 0.34rem; margin-bottom: 0.26rem;}
    :deep(.el-pagination){
      justify-content: center;
    }
    .top.show{margin-bottom: 0px !important;}
  }
</style>